/* 
1 去看看接口的数据 
  1 先获取当前城市 - > 城市的id
  2 再把城市id 发送给后台  ->  后台会返回对应城市的 房源条件 数据
2 学习 picker picker-view 组件  

3 代码该如何组装 合理 优雅 
  1 利用数组来组装 

4 将用户选中的筛选条件 发送给父页面 
  1 用什么样数据来存储 筛选条件   对象  
    通过触发 onChange 来获取 picker标签的值

 */
import React, { Component } from 'react';
import { PickerView } from "antd-mobile";
import { connect } from "react-redux";
import { request } from "../../utils/request";
import indexCss from "./index.module.scss";


class Index extends Component {


  state = {
    // 筛选标题数组
    filterTitleList: [
      { id: 0, title: "区域", cols: 3 },
      { id: 1, title: "方式", cols: 1 },
      { id: 2, title: "租金", cols: 1 },
      { id: 3, title: "筛选", cols: 1 }],
    // 选中的索引 
    currentIndex: -1,
    // picker标签需要的筛选条件数组
    pickerList: [
      // 第1个筛选组件
      // [{},{}],
      // 第2个筛选组件
      // [],
      // 第3个筛选组件
      // []
      // 第4个筛选组件 后面再做
      // [
      //   {label:"户型",list:[]},
      //   {label:"朝向",list:[]},
      //   {label:"楼层",list:[]},
      //   {label:"房屋亮点",list:[]}
      // ]
    ],

    // 用户选中的筛选组件的值 大数组 可以同时存放 四个筛选组件的值
    selectValues: [
      [], [], [], []
    ]

  }

  async componentDidMount() {
    // 获取当前城市的id
    //  获取 城市对应的id
    const res = await request.get("/area/info", { params: { name: this.props.cityName } });
    const id = res.body.value;
    const res2 = await request.get("/houses/condition", { params: { id } });
    // console.log(res2);
    const condition = res2.body;
    // 存放筛选条件的
    const pickerList = [];

    // 存入 区域-地铁 数据
    pickerList.push([condition.area, condition.subway]);
    // 存入 方式
    pickerList.push(condition.rentType);
    // 存入 租金
    pickerList.push(condition.price);
    // 存入 其他筛选
    pickerList.push([
      // 户型
      { label: "户型", list: condition.roomType },
      // 朝向
      { label: "朝向", list: condition.oriented },
      // 楼层
      { label: "楼层", list: condition.floor },
      // 房屋亮点
      { label: "房屋亮点", list: condition.characteristic }
    ])

    this.setState({ pickerList })

  }
  // 点击的筛选标题
  onTitleItemClick(currentIndex) {
    this.setState({ currentIndex })
  }

  // 取消筛选状态
  onCancelFilter = () => {
    this.setState({ currentIndex: -1 })
  }


  // picker组件选中值的事件  valList 数组
  onPickerChange = (valList) => {
    const { selectValues, currentIndex } = this.state;
    selectValues[currentIndex] = valList;
    this.setState({ selectValues })

  }

  // 点击确定
  onSubmitFilter = () => {
    const { selectValues, currentIndex } = this.state;
    // 开始将数组拼接成满足要求的对象
    const filterParam = {};
    // 1 拼接 第1个筛选组件
    filterParam[selectValues[0][0]] = selectValues[0][2] === "null" ? selectValues[0][1] : selectValues[0][2];
    // 2 拼接 第2个筛选组件
    filterParam["rentType"] = selectValues[1][0];
    // 3 拼接 第3个筛选组件
    filterParam["price"] = selectValues[2][0]&&selectValues[2][0].replace("PRICE|","");
    // 4 拼接 第4个筛选组件
    filterParam["more"] = selectValues[3].join(",");

    // 对对象做过滤处理 哪一些值是 不合法  undefined "null"  []  ""   delete
    for (const key in filterParam) {
      if ([undefined, "null", ""].includes(filterParam[key])) {
        // 不合法 的key 
        delete filterParam[key];
      }
      // if(filterParam[key]===undefined||filterParam[key]==="null"||filterParam[key].length===0){
      //   // 不合法 的key 
      //   // console.log(key);
      //   delete filterParam[key];
      // }
    }

  

    this.setState({currentIndex:-1});
    
    
    // 子向父传递数据 
    this.props.onFilterChange(filterParam);

  }

  // 根据索引 渲染内容
  renderByIndex = () => {
    const { filterTitleList, currentIndex, pickerList, selectValues } = this.state;
    //  0-2 3 
    if (currentIndex < 0 || pickerList.length === 0) {
      // react 中 空标签  
      return <></>
    }
    else if (currentIndex < 3) {
      return <div className={indexCss.main_pickerview} >
        <PickerView
          data={pickerList[currentIndex]}
          cols={filterTitleList[currentIndex].cols}
          onChange={this.onPickerChange}
          value={selectValues[currentIndex]}
        />
        <div className={indexCss.picker_btn}>
          <span onClick={this.onCancelFilter} >取消</span>
          <span onClick={this.onSubmitFilter} >确定</span>
        </div>
      </div>
    } else {
      return this.renderOther(pickerList[currentIndex]);
    }
  }


  // 用户点击了第四个筛选条件 选项
  onOtherItemClick = (value) => {
    const { selectValues, currentIndex } = this.state;
    // 没有添加 就添加 已经添加就删除
    const index = selectValues[currentIndex].indexOf(value);
    if (index === -1) {
      selectValues[currentIndex].push(value);
    } else {
      selectValues[currentIndex].splice(index, 1);
    }
    this.setState({ selectValues });

  }


  // 清除第四个筛选组件的数据
  onClearOtherItem=()=>{
    const {selectValues,currentIndex}=this.state;
    selectValues[currentIndex]=[];
    this.setState({selectValues});
  }

  // 显示第四个筛组件
  renderOther = (list) => {
    const { selectValues, currentIndex } = this.state;
    return <div className={indexCss.other_content}>
      <div className={indexCss.other_mask} onClick={this.onCancelFilter} ></div>
      <div className={indexCss.other_main}>
        <div className={indexCss.other_main_top}>
          {list.map(v => <div key={v.label} className={indexCss.other_group}  >
            <div className={indexCss.other_group_title}>{v.label}</div>
            <div className={indexCss.other_group_content}>
              {v.list.map(vv => <div
                onClick={this.onOtherItemClick.bind(this, vv.value)}
                className={[
                  indexCss.other_item,
                  selectValues[currentIndex].includes(vv.value) ? indexCss.active : ""
                ].join(" ")} key={vv.label} >{vv.label}</div>)}
            </div>
          </div>)}
        </div>
        <div className={indexCss.other_main_btn}>
          <span onClick={this.onClearOtherItem} >清除</span>
          <span onClick={this.onSubmitFilter}  >确定</span>
        </div>
      </div>
    </div>

  }

  render() {
    const { filterTitleList, currentIndex, pickerList } = this.state;
    return (
      <div className={indexCss.filter} >
        {/* 筛选内容 */}
        <div className={indexCss.filter_main}>
          <div className={indexCss.filter_title}>
            {filterTitleList.map((v, i) => <div
              key={v.id}
              onClick={this.onTitleItemClick.bind(this, i)}
              className={[
                indexCss.title_item,
                i === currentIndex ? indexCss.active : ''
              ].join(" ")}
            >{v.title}</div>)}
          </div>
          <div className={indexCss.filter_content}>
            {this.renderByIndex()}
          </div>
        </div>
        {/* 遮罩层 */}
        <div className={indexCss.filter_mask}
          onClick={this.onCancelFilter}
          hidden={currentIndex < 0} ></div>

      </div>
    );
  }
}


const mapStateToProps = (state) => ({
  cityName: state.mapReducer.cityName
})

const mapDispatchToProps = () => ({})


export default connect(mapStateToProps, mapDispatchToProps)(Index);